<!-- 入库管理 -->
<template>
  <div class="CW-B-Bbox">
    <div class="CW-box1">
      <div class="CW-B1">
        <button>
          <el-button type="text" @click="centerDialogVisible = true"
            >添加</el-button
          >
        </button>
        <el-dialog
          title="添加"
          :visible.sync="centerDialogVisible"
          width="30%"
          center
        >
          <div class="tiaoping">
            <div class="T-box1">
              <div class="div1"><span>名称</span>:</div>
              <div class="div2"><input type="text" /></div>
            </div>
            <div class="T-box1">
              <div class="div1"><span>地址</span>:</div>
              <div class="div2"><input type="text" /></div>
            </div>
            <div class="T-box1">
              <div class="div1"><span>坐标</span>:</div>
              <div class="div2"><input type="text" /></div>
            </div>
            <div class="T-box1">
              <div class="div1"><span>状态</span>:</div>
              <div class="div2">
                <el-switch
                  v-model="value"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div class="CW-B2">
        <div class="W-b1">
          <span>
            <el-input v-model="input" placeholder="请输入仓库名称"></el-input>
          </span>
          <span>
            <el-input v-model="danhao" placeholder="请输入仓库单号"></el-input>
          </span>
        </div>
        <div class="W-b2">
          <span>
            <b>时间：</b>
            <el-input v-model="input" placeholder="请输入仓库名称"></el-input>
          </span>
          <span>
            <b>至</b>
            <el-input v-model="danhao" placeholder="请输入仓库单号"></el-input>
          </span>
          <button>查询</button>
          <button>导出</button>
        </div>
        <div></div>
      </div>
    </div>
    <div class="Cw-Box-bbody">
      <div class="CW-box2">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" height="30">
          </el-table-column>
          <el-table-column prop="name" label="小区名称" width="100" height="30">
          </el-table-column>
          <el-table-column prop="zhoubiao" label="电话" width="150">
          </el-table-column>
          <el-table-column prop="shagnping" label="路线"> </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="chaozuo" label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                <el-row>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    circle
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </el-row>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="CW-box3">
        <div></div>
        <div></div>
        <div>
          <el-pagination background layout="prev, pager, next" :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      input: "",
      danhao: "",
      centerDialogVisible: false,
      value: true,
      tableData: [
        {
          id: "1",
          name: "王小虎",
          address: "个似懂非懂发施工方顺丰到付……",
          zhoubiao: "3.894，15.545",
          shagnping: "1500",
          zhuangtai: "开启",
          chaozuo: "编辑 删除",
        },
        {
          id: "2",
          name: "王小虎",
          address: "上海 ",
          zhoubiao: "3.894，15.545",
          shagnping: "1500",
          zhuangtai: "开启",
          chaozuo: "编辑 删除",
        },
        {
          id: "2",
          name: "王小虎",
          address: "上海 ",
          zhoubiao: "3.894，15.545",
          shagnping: "1500",
          zhuangtai: "开启",
          chaozuo: "编辑 删除",
        },
        {
          id: "2",
          name: "王小虎",
          address: "上海 ",
          zhoubiao: "3.894，15.545",
          shagnping: "1500",
          zhuangtai: "开启",
          chaozuo: "编辑 删除",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss' scoped>
.CW-B-Bbox {
  width: 100%;
  height: 100%;
  // background: paleturquoise;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.CW-box1 {
  width: 100%;
  height: 100px;
  background: #fff;
  border-bottom: 1px solid #000;
  display: flex;
  flex-direction: column;
}
.CW-B1 {
  width: 100%;
  height: 50px;
  // background: red;
  display: flex;
  align-items: center;
  padding: 0px 20px;
}
.CW-B2 {
  width: 100%;
  height: 50px;
  // background: paleturquoise;
  display: flex;
  // justify-content: space-around;
  align-items: center;
}
.W-b2 {
  margin-left: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.W-b2 span {
  // width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.W-b2 span b {
  width: 70px;
  // background: red;
  text-align: center;
}
.W-b2 button {
  width: 100px;
  height: 40px;
  margin: 0px 5px;
  border-radius: 10px;
  background: rgb(243, 243, 243);
}
.W-b1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.W-b1 span {
  margin: 0px 10px;
}
.CW-B1 button {
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 0px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  background: rgb(36, 204, 255);
}
.Cw-Box-bbody {
  width: 100%;
  height: 100%;
  // background: rgb(236, 21, 21);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.CW-box2 {
  width: 100%;
  height: auto;
  // background: rgb(255, 255, 255);
  overflow: hidden;
}
.CW-box3 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background: rgb(197, 197, 197);
}
.tiaoping {
  // width: 500px;
  height: 400px;
  // background: red;
  display: flex;
  flex-direction: column;
}
.T-box1 {
  width: 100%;
  height: 50px;
  // background: paleturquoise;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.div1 {
  width: 50%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  font-weight: bolder;
}
.div2 {
  width: 50%;
  height: 50px;
  display: flex;
  align-items: center;
}
.div2 input {
  width: 250px;
  height: 40px;
}
</style>